import { PlusOutlined } from "@ant-design/icons-vue";
import { defineComponent, reactive } from "vue";
import styles from "./transferAccountsPopup.module.less";
import { message, UploadProps } from "ant-design-vue";
import { $commonUploadImg } from "@/api/common/common";
import { getBase64ByFile } from "@/common/utils";
import { $offlinRecharge } from "@/api/userCenter/PrePaidDepositAccount/PrePaidDepositAccount";

export default defineComponent({
  setup(props, { expose }) {
    const state = reactive({
      isShow: false,
      fileUrlList: [],
    } as any)
    // 打开弹窗
    const open = () => {
      state.isShow = true;
    }


    //上传图片
    const beforeUploadLegalPerson: UploadProps["beforeUpload"] = (file) => {
      getBase64ByFile(file).then((base64_img: any) => {
        $commonUploadImg({ base64_img }).then((res: any) => {
          state.fileUrlList[state.fileUrlList.length - 1].url = res.data.url;
          console.log(state.fileUrlList);
          state.uploading = false;
        }).catch(() => {
          state.uploading = false;
        });
      }).catch(() => {
        state.uploading = false;
      });
      return false;
    };

    //关闭弹窗
    const close = () => {
      state.isShow = false;
      state.fileUrlList = [];
    }

    //确认上传
    const upload = () => {
      if (state.fileUrlList.length === 0) {
        message.error('凭证至少为一张，请重新上传');
        return;
      }
      $offlinRecharge({
        voucher: state.fileUrlList.map((x: any) => x.url)
      }).then((res: any) => {
        message.success('上传成功');
        state.isShow = false;
        state.fileUrlList = [];
      })
    }

    expose({
      open,
    })
    return () => (
      <div class={styles['transferAccountsPopup-floating']} v-show={state.isShow}>
        <div class={styles.card}>
          <div class={styles.title}>转账充值</div>
          <div class={styles.container}>
            <div class={styles['container-row']}>户名： 中联金安保险经纪有限公司宁波分公司</div>
            <div class={styles['container-row']}>银行账号： 3901111319000022124</div>
            <div class={styles['container-row']}>开户行名称： 中国工商银行股份有限公司宁波月湖支行</div>
            <div class={styles.tips}>若用个人账户汇款，请向中联金安公司传<span onClick={() => { window.location.href = "" }}>个人汇款授权书</span>，以便及时完成支付，传真</div>
            <div class={styles['container-row']}>凭证最多上传三张</div>
            <div class={styles['upload-demo']}>
              <div>
                <a-upload
                  list-type="picture-card"
                  v-model:fileList={state.fileUrlList}
                  before-upload={beforeUploadLegalPerson}
                  max-count={3}
                >
                  <div>
                    <PlusOutlined />
                    <div>上传凭证</div>
                  </div>
                </a-upload>
              </div>
            </div>
          </div>
          <div class={styles.footer}>
            <div class={styles['close-btn']} onClick={() => { close() }}>关闭</div>
            <div class={styles['upload-btn']} onClick={() => { upload() }}>确认上传</div>
          </div>
        </div>
      </div>
    )
  }
})